{extend name="common/base" /}
<!--title-->
{block name="titlekeyword"}
<title>{$content}</title>

{/block}

<!---头部特色css  开始-->
{block name="titleStyle"}
<style>
canvas{
	display: block;
	margin:50px auto;
	box-shadow: -2px -2px 2px #efefef,5px 5px 5px #b9b9b9; /*阴影*/
}
</style>
{/block}
<!---头部特色css  结束-->

<!--代码主要内容-->
{block name="main"}
<h6>内容</h6>

<canvas id="chess" width="450px" height="450px"></canvas>

<!-- -->
<pre>
	<h5>html</h5>
	&lt;canvas id="chess" width="450px" height="450px"&gt;&lt;/canvas&gt;
	<br/>
	<h5>css</h5>
    canvas{
		display: block;
		margin:50px auto;
		box-shadow: -2px -2px 2px #efefef,5px 5px 5px #b9b9b9; /*阴影*/
	}
	<h5>javascript</h5>
	var chess = document.getElementById('chess');
/*画图必须 */
var context = chess.getContext('2d');

context.strokeStyle = "#BFBFBF";

/**载入图片 开始 图片名称为logo  http://www.hyhthjk.com.cn/static/note/img/5.jpg*/
var logo = new Image();
logo.src = "/../../static/note/img/5.jpg";
/*加载图片*/
logo.onload = function(){
/* 画图 从（0，0）到（450，450）  */ 
context.drawImage(logo,0,0,450,450);
drawChessBoard();
}

</pre> {/block}
<!--底部js 在这里是js的实际代码区-->
{block name="footjs"}
<script language="javascript">
var chess = document.getElementById('chess');
/*画图必须 */
var context = chess.getContext('2d');

context.strokeStyle = "#BFBFBF";

/**载入图片 开始 图片名称为logo  http://www.hyhthjk.com.cn/static/note/img/5.jpg*/
var logo = new Image();
logo.src = "/../../static/note/img/5.jpg";
/*加载图片*/
logo.onload = function(){
/* 画图 从（0，0）到（450，450）  */ 
context.drawImage(logo,0,0,450,450);
drawChessBoard();
}

</script> {/block}